<script setup>
import TopPart from '../components/TopPart.vue'
import weatherChart from '../components/WeatherChart.vue'

import { storeToRefs } from 'pinia'
import { useWeatherStore } from '../stores/weather'

const { cityBaseData, buttonShow } = storeToRefs(useWeatherStore())
</script>

<template>
  <div class="flex flex-col min-h-screen bg-weather-primary">
    <TopPart />
    <div class="container text-white">
      <div class="flex flex-col text-white w-full mb-6 relative">
        <div class="p-2 text-center bg-weather-secondary">
          你正在预览{{ cityBaseData.city }}的天气信息
          <span v-if="buttonShow">，可以通过右上角的"+"号按钮保存起来</span>
        </div>

        <div class="container flex flex-col text-center mt-6 gap-4">
          <h1>当日气温是：{{ cityBaseData.temperature }}摄氏度</h1>
          <h1>当日天气是：{{ cityBaseData.weather }}</h1>
          <h1>当日风向是：{{ cityBaseData.winddirection }}风</h1>
          <h1>当日风力是：{{ cityBaseData.windpower }}级</h1>
        </div>
      </div>

      <hr class="border-white border-opacity-10 mt-6 mb-6" />
      <weatherChart />
    </div>
  </div>
</template>

<style scoped></style>
